<template>
  <div class="wrapper">
    <div class="uc-main clearfix">
      <div class="uc-aside">
        <user-menu></user-menu>
      </div>
      <div class="uc-content">
        <div class="uc-panel">
          <div class="uc-bigtit">个人信息</div>
          <div class="uc-panel-bd">
            <div class="account-info clearfix" >
            <el-form class="col-userinfo"  ref="form" :model="form" label-width="80px">
              <el-form-item  label="昵称">
                <el-input style="width: 320px" class="bd" v-model="form.nickName"></el-input>
              </el-form-item>
              <el-form-item label="生日">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 320px;"></el-date-picker>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item  label="电话">
                <el-input style="width: 320px" class="bd" v-model="form.phone"></el-input>
              </el-form-item>
              <el-button style="background: #ff0000; color: #ffffff; width: 320px" class="tj" type="submit" @click="modifyUser">修改</el-button>
            </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import UserMenu from './UserMenu'
import http from '../../../base/api/http'
export default {
  name: 'UserAccountFrom',
  components: {
    UserMenu
  },
  data () {
    return {
      form: {
        nickName: null,
        date: null,
        sex: null,
        phone: null
      }
    }
  },
  methods: {
    modifyUser () {
      http.requestPost('/java/api/user/userAccountUpdate', this.form).then((res) => {
        if (res.status === 0) {
          alert('修改成功')
        } else {
          alert('修改失败')
        }
      })
    },
    getUser () {
      http.requestQuickGet('/java/api/user/getUserAccount').then((res) => {
        if (res.status === 0) {
          this.form = res.data
        } else {
          alert('获取用户信息失败')
        }
      })
    }
  },
  mounted () {
    this.getUser()
  }
}
</script>
<style></style>
